<h3>
	Popover autoclose tests
	<span class="ms-1 badge {{ d.isOpen() ? 'bg-success' : 'bg-danger' }}" id="open-status">{{
		d.isOpen() ? 'open' : 'closed'
	}}</span>
</h3>

<form id="default" (contextmenu)="$event.preventDefault()">
	<div class="mb-3 row row-cols-lg-auto">
		<div class="col-12">
			<button
				#d="ngbPopover"
				ngbPopover="Popover here"
				[autoClose]="autoClose"
				triggers="click"
				type="button"
				class="btn btn-outline-secondary ms-2"
			>
				Popover
			</button>
		</div>

		<div class="col-12">
			<div ngbDropdown class="d-inline-block ms-3">
				<button class="btn btn-outline-secondary" id="autoclose-dropdown" ngbDropdownToggle>Choose Autoclose</button>
				<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
					<button class="dropdown-item" id="autoclose-true" (click)="autoClose = true">True</button>
					<button class="dropdown-item" id="autoclose-false" (click)="autoClose = false">False</button>
					<button class="dropdown-item" id="autoclose-outside" (click)="autoClose = 'outside'">'Outside'</button>
					<button class="dropdown-item" id="autoclose-inside" (click)="autoClose = 'inside'">'Inside'</button>
				</div>
			</div>

			<button class="btn btn-outline-secondary ms-1" id="outside-button">Outside button</button>
		</div>
	</div>
</form>
